<template>
    <div class="">
        <div v-show="isShow">
            <div class="gray">&nbsp;&nbsp;&nbsp;网上举报</div>
            <div class="form">
                <Form :model="formItem" :label-width="150">
                    <FormItem label="标题：">
                        <Input v-model="formItem.report_title" placeholder="请输入标题"></Input>
                    </FormItem>
                    <FormItem label="写信人姓名或部门：">
                        <Input v-model="formItem.report_people_name" placeholder="请填写姓名或部门"></Input>
                    </FormItem>
                    <FormItem label="电话：">
                        <Input v-model="formItem.phone" placeholder="请输入电话"></Input>
                    </FormItem>
                    <FormItem label="被投诉人姓名或部门：">
                        <Input v-model="formItem.be_complain_name" placeholder="请输入被投诉人姓名或部门"></Input>
                    </FormItem>
                    <FormItem label="内容：">
                        <Input v-model="formItem.report_content" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem>
                        <Button shape="circle" type="primary" class="reset" @click="saveReport(formItem)">保存数据</Button>
                        <Button shape="circle" class="reset">重置</Button>
                    </FormItem>
                </Form>
        </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'RightReportContent1',
  props: {
    title: {
      type: String,
      default: () => {
        return ''
      }
    },
    isShow: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      formItem: {
        report_title: '',
        report_people_name: '',
        phone: '',
        be_complain_name: '',
        report_content: ''
      }
    }
  },
  methods: {
    saveReport (formItem) {
      this.$emit('result', this.formItem)
      this.formItem = {}
    }
  },
  mounted () {

  }
}
</script>

<style scoped lang="less">
    .gray{
        height: 50px;
        background-color: #ebebeb;
        line-height: 50px;
        font-size: 20px;
        color: #0166b6;
    }
    .reset{
        margin-right: 20px;
        width: 100px;
    }
    .content tr td{
        border:1px #d7dde4 solid;
        height: 80px;
        font-size: 16px;
        color: black;
        text-indent: 1em;
    }
    .content{
        width: 100%;
        margin-top: 10px;
    }
    .title{
        width: 180px;
    }
    .input{
        width: 500px;
    }
    .long{
        height: 100px;
    }
    .form{
        margin-top: 20px;
    }
</style>
